<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>美容师详情</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css"/>
    
    <script src="__FONT__/js/zepto.min.js"></script>
    <script src="__FONT__/js/TouchSlide.1.1.js"></script>
	<script type="text/javascript" src="__FONT__/js/zepto.picLazyLoad.js"></script>    
	<script type="text/javascript" charset="utf-8">
		function stopBubble(e) {
		    // 如果提供了事件对象，则这是一个非IE浏览器
		    if ( e && e.stopPropagation ) {
		        // 因此它支持W3C的stopPropagation()方法
		        e.stopPropagation();
		    } else {
		        // 否则，我们需要使用IE的方式来取消事件冒泡
		        window.event.cancelBubble = true;
		    }
		}
		$(function () {
			$("img").picLazyLoad({
				scrollElm : $(window),
		 	});
			$('[data-redirect="rel"]').click(function (e) {
				var url = $(this).attr('data-url');
				window.location.href = url;
			});
			$('.call').click(function (e) {
				stopBubble(e);
			});
			tab(".ul_new li",".tab_box",1)
			tab(".dsd li",".tab_box2",1)
			tab(".dsds li",".tab_box2s",1)
			
// 			$(window).scroll(function() {
// 	       		if ($(window).scrollTop() >= $(".mrs_detailsec .ul_new").offset().top) {
// 	                $(".mrs_detailsec .ul_new").addClass('on');
// 	            }else{
// 					$(".mrs_detailsec .ul_new").removeClass('on');
// 				}
// 	        });	
		});
		
		function tab(a,b,c){
			if(c==1){
				$(a).click(function(){  
					var index = $(this).index();
					$(this).addClass("on").siblings().removeClass("on");
					$(b).hide();      
					$(b).eq(index).show();
				});
			} else {
				$(a).hover(function(){  
					var index = $(this).index();
					$(this).addClass("on").siblings().removeClass("on");
					$(b).hide();      
					$(b+":eq("+index+")").show();
				});
			}        
		}
	</script>
	<style type="text/css">
		.btylistmain h2 {
    		overflow: hidden;
   		}
	</style>
</head>
<body style="background:#f7f7f9;">
	<include file="Public/customHeader" title="美容师详情" url="{:U('/Index/beautician')}"/>
    <header class="detail_head">
       <div class="btylistmain womenmain detailhead">
          <h2>
          <if condition="$item['profile_img']">
	       <img src="__UPLOADS__/Profile/{$item.profile_img}">
	       <else />
	       <img src="__FONT__/images/defaultProfile.png">
	       </if>
		  </h2>
          <dd>
              <h3><span>{$item.name}</span></h3>
              <h3><for start="0" end="$item['start']"><i></i></for><label>{$item.service_total}次服务</label></h3>
              <h3><strong>专业：{$item.professional_score}分</strong><strong>守时：{$item.punctuality_score}分</strong><strong>沟通：{$item.communication_score}分</strong></h3>
           </dd>
       </div>
       <if condition="$beauty">
       <div class="btylistmain detailmain addradius" data-redirect="rel" data-url="{:U('/BeautyParlor/detail/id/'.$beauty['id'])}">
           <h2>
           	<if condition="$beauty['banner']">
           		<img src="__UPLOADS__/Beauty/Banner/{$beauty.banner}">
           	<else />
           		<img src="__FONT__/images/btylist_01.jpg">
           	</if>
           </h2>
           <dd>
              <h3 class="hacklocation"><span>{$beauty.name}</span><label class="distance" data-latitude="{$beauty.latitude}" data-longitude="{$beauty.longitude}"></label></h3>
              <h3><for start="0" end="$beauty['start']"><i></i></for><label>{$beauty.user_total}人消费</label></h3>
              <h3><span>{$beauty.address}</span></h3>
           </dd>
        </div>
        </if>
        <div class="appraise" data-url="{:U('/Comments/index/id/'.$item['id'])}" data-redirect="rel">
           <h1>顾客评价：<span>{$item.comment_total}</span><label></label></h1>
        </div>
    </header>
 	<section class="mrs_detailsec mrshack">
         <div class="tab">
            <ul class="ul_new">
              <li class="on"><a href="javascript:;">服务项目</a></li>
              <li><a href="javascript:;">个人简介</a></li>
              <div class="huiline"></div>
            </ul>
            <div class="tab_box bd">
               	<ul class="beauty_sec_navlist" >
                    {:W('ServiceItem/items', array(false, $item['id']))}
            	</ul>
            </div>
            <div class="tab_box box_two" style="display:none" >
            	<p class="pppp">{$item.beautician_desc}</p>
                <ul class="personal">
                    <h1>认证证书<a></a></h1>
                    <div class="certificate zhediepic">
                    	<if condition="$photos">
                        <ul>
                        	<foreach name="photos" item="photo">
                          		<li><img src="__UPLOADS__/Certification/{$photo.upload_number}/{$photo.img_name}"></li>
                          	</foreach>
                        </ul>
                        <else />
                        	<div class="no_bank"><h1>美滴滴</h1><p>没有认证证书~</p></div>
                        </if>
                    </div>
                </ul>
                <div class="workexp">
                   <h1>工作经历<a></a></h1>
                   <div class="zhedie">
                   <if condition="$experiences">
                       <foreach name="experiences" item="experience">
	                   <dd>
	                      <i></i>
	                      <h2>{$experience.start} - {$experience.end}</h2>
	                      <span>{$experience.beauty_parlor_name}</span><label>{$jobTitles[$experience['job_title_id']]}</label>
	                   </dd>
	                   </foreach>
	               <else />
	               		<div class="no_bank"><h1>美滴滴</h1><p>没有填写工作经历~</p></div>
	               </if>
                   </div>
                </div>
            </div>
         </div>
	</section>
    <footer class="mrs_order">
    	<a href="{:U('Index/selectBeauticianService/id/'.$item['id'])}">马上预约</a>
    </footer>
    <script type="text/javascript" src="__FONT__/js/zepto.cookie.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <include file="Public/share-js" />
    <script>
    	$(function () {
    		$(".workexp h1").click(function(){
				$(this).each(function() {
               		if($(this).children('a').hasClass('transform')){
						$(this).children('a').removeClass('transform');
						$(".zhedie").hide();
					}else{
						$(this).children('a').addClass('transform');
						$(".zhedie").show();
					}  
           		});
			});
		 	$(".personal h1").click(function(){
				$(this).each(function() {
                	if($(this).children('a').hasClass('transform')){
						$(this).children('a').removeClass('transform');
						$(".zhediepic").hide();
					}else{
						$(this).children('a').addClass('transform');
						$(".zhediepic").show();
					}  
          		});
			});
    	});
    	
    	function showLocationInfo(pt, rs) {
    		var addComp = rs.addressComponents;
    		var start = {};
    		if (pt.lat && pt.lng) {
    			start ['latitude'] = pt.lat;
    			start ['longitude'] = pt.lng;
    		}
    		
    		var selectProvince = localStorage.getItem('select_province'),
	    	selectCity = localStorage.getItem('select_city'),
	    	ajaxLoadParams = {},
	    	currentProvince = addComp.province,
	    	currentCity = addComp.city;
	    
	    	if ($.trim(selectProvince) != '' && $.trim(selectCity) != '' && 
	    		currentProvince != selectProvince && currentCity != selectCity) {
	    	
		    } else {
				var end = {latitude: $('.distance').attr('data-latitude'), longitude: $('.distance').attr('data-longitude')};
				$.ajax({
					url: '{:U("/BeautyParlor/getUserToBeautyDistance")}',
					data: {start: start, end: end},
					dataType: 'json',
					success: function (result) {
						if (result.status == '1') {
							$('.distance').html(result.distance);
							$(".hacklocation label").each(function() {
								  var hWidth = $(".hacklocation").width();
								  var lWidth = $(this).width()+14;
								  var sWidth = hWidth-lWidth;
								  $(this).siblings().css('width',sWidth); 
					          }); 
						} else {
							$('.distance').html(result.message);
						}
					}
				});
		    }
    	}
    </script>
</body>
</html>